(function ($, window) {

    function Carousel(option) {
        if (!option.element) {
            throw new Error('根节点都没有，你玩我')
        } else {
            this.element = $(option.element);         // 根节点
        }
        this.option = {
            ulClass: option.ulClass || '.inner',  // ul的类名
            auto: option.auto || false,      // 自动播放
            controls: option.controls || false, // 小圆点控制
            lrBtn: option.lrBtn || true,   // 左右按钮
        }
        this.index;
        this.li_width;
        this.flag = true;

        this.init();
        if (this.option.lrBtn) {
            this.LRbtn();
        }
    }


    Carousel.prototype.init = function () {
        // DOM 拷贝 li
        var $first = this.element.find('.inner>li:first').clone(true);
        var $last = this.element.find('.inner>li:last').clone(true);
        // 插入 一前一后
        this.element.find('.inner').append($first);
        this.element.find('.inner').prepend($last);

        // 下标
        this.index = 1;
        // 宽度
        this.li_width = $first.width();
        // 克隆后 ul的偏移
        this.element.find('.inner').css({ 'marginLeft': -1 * this.index * this.li_width })
    }
    Carousel.prototype.LRbtn = function () {
        console.log(123);

        // 保存this指向
        var self = this;

        // 左右按钮的绑定
        this.element.find('.rightBtn').on('click', function () {
            if (self.flag == false) {
                return;
            }
            self.flag = false;
            // 下标++
            self.index++;


            // ul执行移动的动画
            self.element.find('.inner').animate(
                { 'marginLeft': -1 * self.index * self.li_width }, 1000,
                function () {
                    self.flag = true;

                    // 执行动画后的回调   animationend   transitionend
                    // console.log(index,this.childElementCount);
                    // 下标 >= ul子元素个数  就代表 在队尾
                    if (self.index >= this.childElementCount - 1) {
                        // 回到1号位
                        self.index = 1;
                        $(this).css({ 'marginLeft': -1 * self.index * self.li_width });
                    }
                })
        })

    }

    // 暴露轮播图对象
    window.Carousel = Carousel;

})(jQuery, window)